<template>
  <teleport to="#model"></teleport>
    <div id = "center" v-if='isopen'>
       <h2> <slot>This is a model</slot> </h2>
       <button @click="ButtonClick ">close</button>
    </div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'
export default defineComponent({
    props: {
        isopen: Boolean
    },
    emits: {
        'close-model': null
    },
    setup(prop,context){
        const ButtonClick = () =>{
             context.emit('close-model')
        }
        return {
            ButtonClick
        }
    }
})
</script>
<style  scoped>
    #center{
        width: 200px;
        height: 200px;
        border: 2px solid black;
        background: white;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        
    }
</style>
